<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Ionic Item Sliding</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Ionic CDN demo</ion-title>
          <ion-buttons slot="primary">
            <ion-button onclick="addItems()">Add Items</ion-button>
          </ion-buttons>
        </ion-toolbar>
        <ion-toolbar></ion-toolbar>
        <ion-toolbar></ion-toolbar>
        <ion-toolbar></ion-toolbar>
        <ion-toolbar></ion-toolbar>
      </ion-header>

      <ion-content>
        <p>
          <ion-button onclick="addItems()">Add Items</ion-button>
        </p>

        <ion-virtual-scroll id="virtual">
          <template>
            <ion-item>
              <ion-label></ion-label>
            </ion-item>
          </template>
        </ion-virtual-scroll>

        <ion-infinite-scroll threshold="100px" id="infinite-scroll">
          <ion-infinite-scroll-content loading-spinner="bubbles" loading-text="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-content>
    </ion-app>

    <script>
      const items = Array.from({ length: 100 }, (x, i) => i);
      const virtual = document.getElementById('virtual');
      virtual.items = items;
      virtual.nodeRender = (el, cell) => {
        if (cell.type === 'item') {
          renderItem(el, cell.value);
        }
      };
      function renderItem(el, item) {
        el.querySelector('ion-label').textContent = item;
      }

      const infiniteScroll = document.getElementById('infinite-scroll');
      infiniteScroll.addEventListener('ionInfinite', async function () {
        const data = await getAsyncData();
        infiniteScroll.complete();
        addItems(data);
      });

      function addItems(append) {
        if (!append) {
          append = Array.from({ length: 10 }, (x, i) => 'append' + i);
        }
        items.push(...append);
        virtual.checkEnd(append.length);
      }

      function getAsyncData() {
        return new Promise((resolve) => {
          setTimeout(() => {
            const data = Array.from({ length: 10 }, (x, i) => 'append' + i);
            resolve(data);
          }, 500);
        });
      }
    </script>
  </body>
</html>
